<template>
  <div>
    <div class="now">
      <h3>当前积分:</h3>
      <h3>3000</h3>
    </div>
    <div class="taocan">
      <h5>请选择充值套餐</h5>
      <div class="five">
        <p>充值套餐1</p>
        <h1>￥5000=5000分</h1>
        <br />
        <el-button plain>立即充值</el-button>
      </div>
      <div class="eight">
        <div class="rec">推荐</div>
        <p>充值套餐2</p>
        <h1>￥8000=10000分</h1>
        <br />
        <el-button plain>立即充值</el-button>
      </div>
    </div>
    <hr />
    <p class="last">如有任何疑问请打客服热线020-6669 3919</p>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.now {
  position: relative;
  height: 50px;
}
h3:nth-child(1) {
  font-weight: normal;
  position: absolute;
  left: 0;
  top: 0;
}
h3:nth-child(2) {
  font-weight: normal;
  position: absolute;
  left: 90px;
  top: 0;
}

.taocan {
  position: relative;
  height: 400px;
}
.five {
  height: 200px;
  width: 300px;
  border: 1px solid black;
  position: absolute;
  left: 200px;
  top: 40px;
  text-align: center;
}
.eight {
  height: 200px;
  width: 300px;
  border: 1px solid black;
  position: absolute;
  left: 700px;
  top: 40px;
  text-align: center;
}
.rec {
  height: 30px;
  width: 60px;
  position: absolute;
  top: -15px;
  left: 241px;
  background: black;
  color: white;
  text-align: center;
  line-height: 30px;
  font-size: 10px;
}
.last {
  text-align: center;
}
</style>